<template>
  <!-- 新增、编辑菜品组件 -->
  <el-dialog
    v-model="dialogFormVisible"
    :title="dialogTitle"
    width="860"
    top="5vh"
  >
    <div>
      <el-form
        ref="dishFormRef"
        :model="dishForm"
        :rules="dishRules"
        label-width="100px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜品名称:" prop="name">
              <el-input
                v-model="dishForm.name"
                placeholder="请填写菜品名称"
                maxlength="20"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜品分类:" prop="categoryId">
              <el-select
                v-model="dishForm.categoryId"
                placeholder="请选择菜品分类"
              >
                <el-option
                  v-for="(item, index) in categoryList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜品价格:" prop="price">
              <el-input v-model="dishForm.price" placeholder="请设置菜品价格" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="菜品图片:" prop="image">
              <el-upload
                class="avatar-uploader"
                action="/api/common/upload"
                :show-file-list="false"
                :on-success="handleDishImgSuccess"
                :before-upload="beforeDishImgUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="菜品描述:" prop="description">
              <el-input
                v-model="dishForm.description"
                type="textarea"
                :rows="4"
                placeholder="菜品描述，最长200字"
                maxlength="200"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 对话框底部按钮区域 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm()"> 保存 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { defineOptions } from 'vue'
import { ElMessage } from 'element-plus'
import { reqGetDishById } from '@/api/dish'

defineOptions({
  name: 'DishAddEdit'
})

const dialogTitle = ref('添加菜品')
const dialogFormVisible = ref(false)
const actionType = ref('add')
const open = async (row) => {
  console.log(row)
  if (row.id) {
    console.log('编辑回显')
    dialogTitle.value = '修改菜品'
    actionType.value = 'edit'
    //请求当前菜品的详情数据（带口味）
    const res = await reqGetDishById(row.id)
    //重构要显示的数据
    dishForm.value = res.data.data
    //price处理
    dishForm.value.price = String(dishForm.value.price / 100)
    // 菜品图片url处理(由计算属性完成)
    // imageUrl.value = `/api/common/download?name=${dishForm.value.image}`
    dialogFormVisible.value = true
  } else {
    dialogTitle.value = '添加菜品'
    actionType.value = 'add'
    dialogFormVisible.value = true
    //清空dishForm数据
    dishForm.value = {
      id: '',
      name: '', //菜品名称
      categoryId: '', //菜品分类
      price: '', //价格
      code: '', //商品码（保留字段）
      // flavors: [], //口味做法
      image: '', //菜品图片
      description: '', //菜品描述
      status: true //销售状态
    }
    // 清空：菜品图片
    // imageUrl.value = ''
  }
}
defineExpose({
  open
})

//新增、修改菜品的功能
//dish表单
const dishForm = ref({
  id: '',
  name: '', //菜品名称
  categoryId: '', //菜品分类
  price: '', //价格
  code: '', //商品码（保留字段，用于顾客端使用）
  // flavors: [], //口味做法
  image: '', //菜品图片
  description: '', //菜品描述
  status: true //销售状态
})
//dish表单的校验
const dishRules = reactive({
  name: [{ required: true, message: '请填写菜品名称', trigger: 'blur' }],
  categoryId: [{ required: true, message: '请选择菜品分类', trigger: 'blur' }],
  price: [
    {
      required: true,
      // 'message': '请填写菜品价格',
      validator: (rules, value, callback) => {
        if (!value) {
          callback(new Error('请填写菜品价格'))
        } else {
          const reg = /^\d+(\.\d{0,2})?$/
          if (reg.test(value)) {
            if (value < 10000) {
              callback()
            } else {
              callback(new Error('菜品价格小于10000'))
            }
          } else {
            callback(new Error('菜品价格的格式只能为数字,且最多保留两位小数'))
          }
        }
      },
      trigger: 'blur'
    }
  ]
})

// 菜品图片上传
import { Plus } from '@element-plus/icons-vue'
// 菜品图片在服务器上的请求路径
// const imageUrl = ref('')
// 改用计算属性 ，得到：菜品图片在服务器上的请求路径
const imageUrl = computed(() => {
  return dishForm.value.image
    ? `/api/common/download?name=${dishForm.value.image}`
    : ''
})

// 上传之前，限制图片格式为png或jpg、图片的大小为2MB
const beforeDishImgUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('图片必须是jpg或png格式')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过 2MB!')
    return false
  }
  return true
}

// 上传成功，则加载图片
const handleDishImgSuccess = (response, file, fileList) => {
  // 拼接download接口预览
  dishForm.value.image = response.data
  // 去掉以下代码，改用计算属性
  // imageUrl.value = `/api/common/download?name=${response.data}`
}

//获取菜品（type=1）分类列表
import { reqGetCategoryListNoPage } from '@/api/category'
const categoryList = ref([])
const getCategoryList = async () => {
  const res = await reqGetCategoryListNoPage({ type: 1 })
  categoryList.value = res.data.data
}

onMounted(() => {
  getCategoryList()
})

//提交表单完成菜品添加
import { reqAddDish, reqUpdateDish } from '@/api/dish'
const dishFormRef = ref(null)
const submitForm = () => {
  dishFormRef.value.validate(async (valid) => {
    //如果表单验证通过，则valid为true
    if (valid) {
      //组装请求数据
      let dishData = { ...dishForm.value }

      dishData.status = 1 //起售状态
      dishData.price *= 100 //元-->分
      if (!imageUrl.value) {
        ElMessage.error('请上传菜品图片')
        return false
      }
      if (actionType.value == 'add') {
        delete dishData.id
        //发送添加菜品请求
        const res = await reqAddDish(dishData)
        //新增菜品完毕，则清空dishForm数据，以便下次新增
        dishForm.value = {
          id: '',
          name: '', //菜品名称
          categoryId: '', //菜品分类
          price: '', //价格
          code: '', //商品码（保留字段）
          // flavors: [], //口味做法
          image: '', //菜品图片
          description: '', //菜品描述
          status: true //销售状态
        }
        //给出成功的消息提示、关闭窗口
        ElMessage.success(res.data.msg || '新增菜品成功！')
        dialogFormVisible.value = false
        // 通知父组件重新获取菜品数据（使用emit子传父）
        emits('update-dish-success')
      } else {
        //发送修改菜品请求
        const res = await reqUpdateDish(dishData)
        //给出成功的消息提示、关闭窗口
        ElMessage.success(res.data.msg || '修改菜品成功！')
        dialogFormVisible.value = false
        // 通知父组件重新获取菜品数据（使用emit子传父）
        emits('update-dish-success')
      }
    } else {
      return false
    }
  })
}

// 通知父组件重新获取菜品数据（使用emit子传父）
const emits = defineEmits(['update-dish-success'])
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
</style>
